<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="48">
          <a-col :md="8" :sm="24">
            <a-form-item label="规则编号">
              <a-input placeholder="" />
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item label="使用状态">
              <a-select placeholder="请选择" default-value="0">
                <a-select-option value="0">
                  全部
                </a-select-option>
                <a-select-option value="1">
                  关闭
                </a-select-option>
                <a-select-option value="2">
                  运行中
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <template v-if="advanced">
            <a-col :md="8" :sm="24">
              <a-form-item label="调用次数">
                <a-input-number style="width: 100%" />
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="更新日期">
                <a-date-picker style="width: 100%" placeholder="请输入更新日期" />
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="使用状态">
                <a-select placeholder="请选择" default-value="0">
                  <a-select-option value="0">
                    全部
                  </a-select-option>
                  <a-select-option value="1">
                    关闭
                  </a-select-option>
                  <a-select-option value="2">
                    运行中
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="使用状态">
                <a-select placeholder="请选择" default-value="0">
                  <a-select-option value="0">
                    全部
                  </a-select-option>
                  <a-select-option value="1">
                    关闭
                  </a-select-option>
                  <a-select-option value="2">
                    运行中
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </template>
          <a-col :md="(!advanced && 8) || 24" :sm="24">
            <span
              class="table-page-search-submitButtons"
              :style="(advanced && { float: 'right', overflow: 'hidden' }) || {}"
            >
              <a-button type="primary">查询</a-button>
              <a-button style="margin-left: 8px">重置</a-button>
              <a @click="toggleAdvanced" style="margin-left: 8px">
                {{ advanced ? '收起' : '展开' }}
                <a-icon :type="advanced ? 'up' : 'down'" />
              </a>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <div class="table-operator">
      <a-button type="primary" icon="plus">
        新建
      </a-button>
      <a-dropdown v-if="selectedRowKeys.length > 0">
        <a-menu slot="overlay">
          <a-menu-item key="1"> <a-icon type="delete" />删除 </a-menu-item>
          <!-- lock | unlock -->
          <a-menu-item key="2"> <a-icon type="lock" />锁定 </a-menu-item>
        </a-menu>
        <a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /> </a-button>
      </a-dropdown>
    </div>

    <s-table
      ref="table"
      size="default"
      :columns="columns"
      :data="loadData"
      :alert="{ show: true, clear: true }"
      :row-selection="{
        selectedRowKeys: this.selectedRowKeys,
        onChange: this.onSelectChange
      }"
    >
      <!-- TODO: <template v-for="(col, index) in columns" v-if="col.scopedSlots" :slot="col.dataIndex" slot-scope="text, record"> -->
      <!-- eslint-disable-next-line vue/no-use-v-if-with-v-for -->
      <template v-for="(col, index) in columns">
        <div :key="index" v-if="col.scopedSlots" :slot="col.dataIndex" slot-scope="text, record">
          <a-input
            v-if="record.editable"
            style="margin: -5px 0"
            :value="text"
            @change="e => handleChange(e.target.value, record.key, col, record)"
          />
          <template v-else>
            {{ text }}
          </template>
        </div>
      </template>
      <template slot="action" slot-scope="text, record">
        <div class="editable-row-operations">
          <span v-if="record.editable">
            <a @click="() => save(record)">保存</a>
            <a-divider type="vertical" />
            <a-popconfirm title="真的放弃编辑吗?" @confirm="() => cancel(record)">
              <a>取消</a>
            </a-popconfirm>
          </span>
          <span v-else>
            <a class="edit" @click="() => edit(record)">修改</a>
            <a-divider type="vertical" />
            <a class="delete" @click="() => del(record)">删除</a>
          </span>
        </div>
      </template>
    </s-table>
  </a-card>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { STable } from '@/components'

@Component({
  name: 'TableInnerEditList',
  components: {
    STable
  }
})
export default class TableInnerEditList extends Vue {
  // data() {
  // 高级搜索 展开/关闭
  private advanced: boolean = false
  // 查询参数
  private queryParam: object = {}
  // 表头
  private columns: any[] = [
    {
      title: '规则编号',
      dataIndex: 'no',
      width: 90
    },
    {
      title: '描述',
      dataIndex: 'description',
      scopedSlots: { customRender: 'description' }
    },
    {
      title: '服务调用次数',
      dataIndex: 'callNo',
      width: '150px',
      sorter: true,
      needTotal: true,
      scopedSlots: { customRender: 'callNo' }
      // customRender: (text) => text + ' 次'
    },
    {
      title: '状态',
      dataIndex: 'status',
      width: '100px',
      needTotal: true,
      scopedSlots: { customRender: 'status' }
    },
    {
      title: '更新时间',
      dataIndex: 'updatedAt',
      width: '200px',
      sorter: true,
      scopedSlots: { customRender: 'updatedAt' }
    },
    {
      table: '操作',
      dataIndex: 'action',
      width: '120px',
      scopedSlots: { customRender: 'action' }
    }
  ]
  // 加载数据方法 必须为 Promise 对象
  private loadData: any = (parameter: any) => {
    return this.$http
      .get('/service', {
        params: Object.assign(parameter, this.queryParam)
      })
      .then((res: any) => {
        return res.result
      })
  }

  private selectedRowKeys: any[] = []
  private selectedRows: any[] = []

  constructor() {
    super()
  }

  // methods
  handleChange(value: any, key: any, column: any, record: any) {
    console.log(value, key, column)
    record[column.dataIndex] = value
  }
  edit(row: any) {
    row.editable = true
    // row = Object.assign({}, row)
  }
  // eslint-disable-next-line
    del (row:any) {
    this.$confirm({
      title: '警告',
      content: `真的要删除 ${row.no} 吗?`,
      okText: '删除',
      okType: 'danger',
      cancelText: '取消',
      onOk() {
        console.log('OK')
        // 在这里调用删除接口
        return new Promise((resolve, reject) => {
          setTimeout(Math.random() > 0.5 ? resolve : reject, 1000)
        }).catch(() => console.log('Oops errors!'))
      },
      onCancel() {
        console.log('Cancel')
      }
    })
  }
  save(row: any) {
    row.editable = false
  }
  cancel(row: any) {
    row.editable = false
  }

  onSelectChange(selectedRowKeys: any, selectedRows: any) {
    this.selectedRowKeys = selectedRowKeys
    this.selectedRows = selectedRows
  }
  toggleAdvanced() {
    this.advanced = !this.advanced
  }

  // watch: {
  //   /*
  //     'selectedRows': function (selectedRows) {
  //       this.needTotalList = this.needTotalList.map(item => {
  //         return {
  //           ...item,
  //           total: selectedRows.reduce( (sum, val) => {
  //             return sum + val[item.dataIndex]
  //           }, 0)
  //         }
  //       })
  //     }
  //     */
  // }
}
</script>

<style lang="less" scoped>
.search {
  margin-bottom: 54px;
}

.fold {
  width: calc(100% - 216px);
  display: inline-block;
}

.operator {
  margin-bottom: 18px;
}

@media screen and (max-width: 900px) {
  .fold {
    width: 100%;
  }
}
</style>
